<template>
  <el-dialog
    width="85%"
    height="600px"
    :title="'会员导入'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div style="margin-top: -30px;">
      <el-button type="primary" @click="memberIntroduction()">导入</el-button>
      <p>可将excel表中的数据直接复制粘帖到此表格中，批量导入本系统(注意:<b style="color:red;">*表示必填项,否则无法导入</b>)</p>
    </div>
    <div>
      <div id="hotTable" class="hotTable" style="overflow: hidden;">
          <!-- <HotTable style="height:450px;" ref="testHot" :settings="hotSettings"></HotTable> -->
      </div>
    </div>
  </el-dialog>
</template>

<script>
  // import Vue from 'vue';
  // import { HotTable } from '@handsontable-pro/vue'
  // import '../../../../../node_modules/handsontable-pro/dist/handsontable.full.css'
  // import Handsontable from 'handsontable-pro'

export default {
  data: function () {
    return {
      visible: false,
      root: 'test-hot',
      tableData: [],

      hotSettings: {

        data: [],

        startRows: 11,//行列范围

        startCols: 100,

        minRows: 100,  //最小行列

        minCols: 5,

        maxRows: 200,  //最大行列

        maxCols: 20,

        // rowHeights: false,

        rowHeaders: true,//行表头，可以使布尔值（行序号），可以使字符串（左侧行表头相同显示内容，可以解析html），也可以是数组（左侧行表头单独显示内容）。

        colHeaders:   [ '手机号*', '姓名*', '证件类型*', '证件号*', '性别*', '会员卡号*', '卡内码', '会员类型*', '创建时间', '推荐员工', '积分', '余额', '地址*', '有效期'],//自定义列表头or 布尔值

        minSpareCols: 2, //列留白

        minSpareRows: 2,//行留白

        currentRowClassName: 'currentRow', //为选中行添加类名，可以更改样式

        currentColClassName: 'currentCol',//为选中列添加类名

        autoWrapRow: true, //自动换行

        contextMenu: {   //自定义右键菜单，可汉化，默认布尔值
          items: {
            "copy": {
              name:'复制'
            },
            "paste": {
              name:'粘贴'
            },
            "row_above": {
              name:'上方插入一行'
            },
            "row_below": {
              name:'下方插入一行'
            },
            "remove_row": {
              name:'删除整行'
            },
          }
        },//右键效果

        fillHandle: true, //选中拖拽复制 possible values: true, false, "horizontal", "vertical"

        fixedColumnsLeft: 0,//固定左边列数

        fixedRowsTop: 0,//固定上边列数

        columns: [     //添加每一列的数据类型和一些配置
          {
            type: 'text',   //数值类型
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'dropdown', //下拉选择
            source: ['居民身份证'],
            strict: false   //是否严格匹配
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'dropdown', //下拉选择
            source: ['男', '女'],
            strict: false   //是否严格匹配
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'dropdown', //下拉选择
            source: ['贵宾', '贵宾'],
            strict: false   //是否严格匹配
          },
          {
            type: 'date',   //时间格式
            dateFormat: 'YYYY-MM-DD',
            correctFormat: true,
            defaultDate: '19000101'
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'text',   //数值类型
          },
          {
            type: 'date',   //时间格式
            dateFormat: 'YYYY-MM-DD',
            correctFormat: true,
            defaultDate: '19000101'
          },

        ],

        colWidths: [70, 40, 60, 90, 30, 80, 60, 40, 80, 50, 40, 40, 80 ,80],

        /* afterChange: function (changes, source) { //数据改变时触发此方法
          console.log(this.getData());
        }, */

        manualColumnFreeze: true, //手动固定列

        manualColumnMove: true, //手动移动列

        manualRowMove: true,   //手动移动行

        manualColumnResize: true,//手工更改列距

        manualRowResize: true,//手动更改行距

        comments: true, //添加注释

        autoColumnSize: false,//当值为true且列宽未设置时，自适应列大小

        cell: [

          {row: 1, col: 1, comment: {value: 'this is test'}},

        ],

        customBorders:[],//添加边框

        columnSorting: true,//排序

        stretchH: 'all',//根据宽度横向扩展，last:只扩展最后一列，none：默认不扩展

      }

    };

  },

  name: 'memberIntroduction',

  components: {

    // HotTable

  },

  methods: {

    saveData (){

      var examData = this.$refs.testHot.table.getData(); //这里要注意，如果使用this.hotSettings.data 保存表格数据，拖拽完以后数据的顺序将不会更新，因此使用 this.$refs.testHot.table.getData(); 来获取数据，获取的数据格式为二维数组。

      console.log(examData );

    },

    init(){
      this.getagreementType('document_type');
      this.loadSellerLevel();
      this.visible = true;
      this.saveData()
    },

    //判断为空
    StringIsEmpty(val){
      if(val == null || val == '' || val == undefined){
        return null;
      }else {
        return val;
      }
    },

    memberIntroduction(){
      this.tableData = [];
      for(var i = 0;i<this.hotSettings.data.length;i++){
        if(JSON.stringify(this.hotSettings.data[i]) === '{}'){
          continue;
        }
        var arr = {
          phoneNumber: this.StringIsEmpty(this.hotSettings.data[i][0]),
          userName: this.StringIsEmpty(this.hotSettings.data[i][1]),
          zjlxname: this.StringIsEmpty(this.hotSettings.data[i][2]),
          IDcode: this.StringIsEmpty(this.hotSettings.data[i][3]),
          sex: this.StringIsEmpty(this.hotSettings.data[i][4]),
          cardNumber: this.StringIsEmpty(this.hotSettings.data[i][5]),
          cardInpNo: this.StringIsEmpty(this.hotSettings.data[i][6]),
          memberLevel: this.StringIsEmpty(this.hotSettings.data[i][7]),
          createDate: this.StringIsEmpty(this.hotSettings.data[i][8]),
          recommendEmployees: this.StringIsEmpty(this.hotSettings.data[i][9]),
          integral: this.StringIsEmpty(this.hotSettings.data[i][10]),
          balance: this.StringIsEmpty(this.hotSettings.data[i][11]),
          address: this.StringIsEmpty(this.hotSettings.data[i][12]),
          endTime: this.StringIsEmpty(this.hotSettings.data[i][13])
        }
        this.tableData.push(arr);
      }
      this.dataPost();
    },

    dataPost(){
      this.$http({
        url: this.$http.adornUrl(`/hotel/hotelmemberleveldetail/model_import`),
        method: "post",
        data: this.$http.adornData({
          list: this.tableData
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data)
          this.visible = false;
          this.$emit("refreshDataList");
        }
      })
    },

    getagreementType(type) {
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelagreementtype/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: 1,
          limit: 999,
          type: type
        })
      }).then(({
        data
      }) => {
        this.documentTypelist = data.page.list;
        var arr = []
        for(var i = 0;i<this.documentTypelist.length;i++){
          arr.push(this.documentTypelist[i].label)
        }
        this.hotSettings.columns[2].source = arr;
        if(!this.dataForm.id && this.documentTypelist.length > 0){
          this.dataForm.certificate = this.documentTypelist[0].id
        }
      });
    },

    loadSellerLevel(sellerId) {
      return this.$http({
        url: this.$http.adornUrl("/hotel/hotelmemberlevel/sellerLevleList"),
        params: this.$http.adornParams({
          sellerId
        }),
        method: "GET"
      }).then(({
        data
      }) => {
        this.levelList = data.data;
        var arr = []
        for(var i = 0;i<this.levelList.length;i++){
          arr.push(this.levelList[i].name)
        }
        this.hotSettings.columns[7].source = arr;
        return this.levelList;
      });
    },

  }

}

</script>

<style>
  .htContextMenu:not(.htGhostTable) {
    z-index: 19999;
  }
</style>
